<template>
    <el-card v-if="paper">
        <template #header>
            <p class="flex-row">
                <el-tooltip effect="dark" :content="paper.name" placement="top">
                    <span class="flex-container">
                        <span v-html="paperFlagSvg"></span>
                        <span class="flex-label flex-content">{{ paper.name }}</span>
                    </span>
                </el-tooltip>
            </p>
        </template>
        <p class="body-row" v-if="showClassName"><span class="body-row-key">班级：</span>{{ paper.gradeClassName }}</p>
        <p class="body-row"><span class="body-row-key">开始时间：</span>{{ paper.startTime }}</p>
        <p class="body-row"><span class="body-row-key">结束时间：</span>{{ paper.endTime }}</p>
        <p class="body-row"><span class="body-row-key">时长：</span>{{ paper.duration }}分钟</p>
        <p class="body-row"><span class="body-row-key">及格分数：</span>{{ paper.passScore }}</p>
        <p class="body-row"><span class="body-row-key">试卷总分：</span>{{ paper.totalScore }}</p>
        <p class="body-row" v-if="paper?.userScore && paper.userScore > 0"><span class="body-row-key">我的得分：</span>{{ paper.userScore }}</p>
        <template #footer>
            <p class="body-row flex-row">
                <el-tooltip effect="dark" :content="paper.remark" placement="top">
                    <span class="flex-container">
                        <span class="flex-label">说明：</span>
                        <span class="flex-content">{{ paper.remark }}</span>
                    </span>
                </el-tooltip>
            </p>
        </template>
    </el-card>
</template>

<script setup lang="ts">
import { paperFlagSvg } from "@/utils/common";
//父传子
interface Props {
    paper?: Record<string, any>;
    showClassName?: boolean;
}
withDefaults(defineProps<Props>(), {
    paper: () => ({}),
    showClassName: true,
});
</script>

<style scoped lang="less">
.el-card {
    border-radius: 10px;
    transition: background-color 0.5s ease;
    .card-header {
        font-weight: bolder;
    }
    .body-row {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
        padding-top: 1px !important;
        padding-bottom: 1px !important;
        .body-row-key {
            font-weight: bold;
        }
    }
}
.el-card:hover {
    background-color: rgb(224, 222, 222);
}

.flex-row {
    margin-bottom: 0;
    .flex-container {
        display: flex;
        align-items: flex-start;
        width: 100%;
        line-height: 1.4;
        .flex-label {
            flex-shrink: 0;
            margin-right: 8px;
            font-weight: bold;
        }

        .flex-content {
            flex: 1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }
}
</style>
